<template>
  <!-- 这是后台管理系统的orders页面 -->
  <div class="star">
    <el-table
    :data="tableData.filter(data => !search || data.ddname.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
    
      highlight-current-row
      show-header>
      <el-table-column
          prop="number"
          label="订单编号"
          width="120"
      >
      </el-table-column>
      <el-table-column
          prop="ddname"
          label="订单内容"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="uname"
          label="下单用户"
          width="90"
      >
      </el-table-column>
    <el-table-column
      prop="sjrname"
      label="收件人姓名"
      width="90"
      >
    </el-table-column>
    <el-table-column
      prop="sjrphone"
      label="收件人电话"
      width="100"
      >
    </el-table-column>
      <el-table-column label="订单状态" prop="state" width="80px">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.state === 0" type="warning"
            >已支付</el-tag
            >
            <el-tag v-else-if="scope.row.state === 1" type="success"
            >配送中</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === 2"
            >已完成</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === -1" type="danger"
            >已取消</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === 3" type="info"
            >退款中</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === 4" type="success"
            >已退款</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === -2" type="danger"
            >拒绝退款</el-tag
            >
          </div>
        </template>
      </el-table-column>
    <el-table-column
      prop="sjraddress"
      label="收件人地址"
      width="110">
    </el-table-column>
    <el-table-column
      prop="yjtime" label="预约时间" width="100">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.yjtime) }}</span>
      </template>
    </el-table-column>
      <el-table-column label="开始时间" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
      prop="ddmessage"
      label="祝福语备注"
      width="90">
    </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="输入订单内容搜索您想要的东西" />
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="success"
              v-if="scope.row.state === 1"
              @click="delivery(scope.row)"
          >送达</el-button>
          <el-button
              size="mini"
              type="primary"
              v-if="scope.row.state === 0"
              @click="delivery(scope.row)"
          >配送</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.state === 0"
            @click="cancel(scope.$index, scope.row)"
            >取消</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total
      >
      </el-pagination>
    </div>

    <div class="footer">
  
 </div>
 
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      form: {},
      search: "",
      radio: "",
      tname:'',
      type:'',
      dialogFormVisible: false,
      currentPage: 1,
      pageSize:10,
      total:0,
      multipleSelection:[]
      
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },
    parseTime(time) {
      if (time === null || time === '') {
        return '-'
      }
      let date = new Date(Date.parse(time)).getTime();
      return this.$moment(date).format("YYYY-MM-DD HH:mm");
    },
    delivery(row) {
      let msg = row.state === 0 ? '您的操作将开始配送订单, 是否继续?' : '您的操作将完成配送订单, 是否继续?'
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.request.get('/dingdan/delivery?id='+row.id).then(res=>{
          if(res.data.code ==="200"){
            this.$message.success("操作成功！")
            this.load()
          }
        })
      });
    },
    // 取消按钮
    cancel(index,row) {
      this.$confirm('小主！您的操作将取消订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.request.get('/dingdan/cancel?id='+row.id).then(res=>{
          if(res.data.code ==="200"){
            this.$message.success("操作成功！")
            this.load()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '还好还好！可以挽回！已为您继续进行该订单'
        });
      });
    },
    // 批量删除
    deleteMore(){
      console.log(this.multipleSelection)
      let ids = this.multipleSelection.map(v =>v.id)
      console.log(ids)
      
      this.$confirm('小主！您的操作将在订单页面批量取消这些鲜花订单, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }).then(() => {
      this.request.post('/dingdan/del/batch',ids).then(res=>{
        if(res.data.code ==="200"){
          this.$message.success("已听从您的指示！为您净化空间啦！")
          this.load()
         }
})
    }).catch(() => {
      this.$message({
        type: 'warning',
        message: '还好还好！可以挽回！已为您取消删除这些好看的鲜花！'
      });
      this.multipleSelection = []
    });
    },
    
    handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    // 页面初始化
    load(){
      this.request.get("/dingdan/page", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          fname:this.fname,
        }
      }).then(res => {
        let data = res.data.data
        this.tableData = data.records;
        this.pageSize = data.size
        this.currentPage = data.current
        this.total = data.total
        this.pages = data.pages
      })
    },
  },
  created() {
    this.load()
  },
  mounted() {
 
  },
};
</script>
<style lang="less" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.star {

  .compute {
    float: right;
    display: flex;
    // margin-bottom: 5%;
    // position: fixed; 是相对于浏览器窗口固定的。即使窗口滚动。他也不会移动
    position: fixed;
    top:650px;
    right:45px;

    .heji {
      // float: right;
      margin: 13px 50px;
      text-align: center;
      .price {
        color: red;
        font-size: 20px;
      }
    }
    .jiesuan {
      margin: 10px;
    }
  }
  .footer {
  display: flex;
  justify-content:space-between;
  .elbutton {
  padding-top: 15px;
}
.block {
  float: right;
  margin-top: 15px;
}
}
}
.block {
  float: right;
  margin-top: 15px;
}
</style>